{{#if (includes examples "ai")}}
import "@/polyfills";
{{/if}}

{{#if (eq backend "convex")}}
  {{#if (eq auth "better-auth")}}
    import { ConvexReactClient } from "convex/react";
    import { ConvexBetterAuthProvider } from "@convex-dev/better-auth/react";
    import { authClient } from "@/lib/auth-client";
  {{else}}
    import { ConvexProvider, ConvexReactClient } from "convex/react";
  {{/if}}
  {{#if (eq auth "clerk")}}
    import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
    import { ConvexProviderWithClerk } from "convex/react-clerk";
    import { tokenCache } from "@clerk/clerk-expo/token-cache";
  {{/if}}
{{else}}
  {{#unless (eq api "none")}}
    import { QueryClientProvider } from "@tanstack/react-query";
  {{/unless}}
{{/if}}

import { Stack } from "expo-router";
import {
  DarkTheme,
  DefaultTheme,
  type Theme,
  ThemeProvider,
} from "@react-navigation/native";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
{{#if (eq api "trpc")}}
import { queryClient } from "@/utils/trpc";
{{/if}}
{{#if (eq api "orpc")}}
import { queryClient } from "@/utils/orpc";
{{/if}}
import { NAV_THEME } from "@/lib/constants";
import React, { useRef } from "react";
import { useColorScheme } from "@/lib/use-color-scheme";
import { Platform, StyleSheet } from "react-native";
import { setAndroidNavigationBar } from "@/lib/android-navigation-bar";

const LIGHT_THEME: Theme = {
  ...DefaultTheme,
  colors: NAV_THEME.light,
};
const DARK_THEME: Theme = {
  ...DarkTheme,
  colors: NAV_THEME.dark,
};

export const unstable_settings = {
  initialRouteName: "(drawer)",
};

{{#if (eq backend "convex")}}
const convex = new ConvexReactClient(process.env.EXPO_PUBLIC_CONVEX_URL!, {
  unsavedChangesWarning: false,
});
{{/if}}

const useIsomorphicLayoutEffect =
  Platform.OS === "web" && typeof window === "undefined"
    ? React.useEffect
    : React.useLayoutEffect;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default function RootLayout() {
  const hasMounted = useRef(false);
  const { colorScheme, isDarkColorScheme } = useColorScheme();
  const [isColorSchemeLoaded, setIsColorSchemeLoaded] = React.useState(false);

  useIsomorphicLayoutEffect(() => {
    if (hasMounted.current) {
      return;
    }
    setAndroidNavigationBar(colorScheme);
    setIsColorSchemeLoaded(true);
    hasMounted.current = true;
  }, []);

  if (!isColorSchemeLoaded) {
    return null;
  }

  return (
    <>
      {{#if (eq backend "convex")}}
        {{#if (eq auth "clerk")}}
          <ClerkProvider tokenCache={tokenCache} publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}>
            <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
              <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
                <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
                <GestureHandlerRootView style={styles.container}>
                  <Stack>
                    <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
                    <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
                    <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
                  </Stack>
                </GestureHandlerRootView>
              </ThemeProvider>
            </ConvexProviderWithClerk>
          </ClerkProvider>
        {{else if (eq auth "better-auth")}}
          <ConvexBetterAuthProvider client={convex} authClient={authClient}>
            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
              <GestureHandlerRootView style={styles.container}>
                <Stack>
                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
                </Stack>
              </GestureHandlerRootView>
            </ThemeProvider>
          </ConvexBetterAuthProvider>
        {{else}}
          <ConvexProvider client={convex}>
            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
              <GestureHandlerRootView style={styles.container}>
                <Stack>
                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
                </Stack>
              </GestureHandlerRootView>
            </ThemeProvider>
          </ConvexProvider>
        {{/if}}
      {{else}}
        {{#unless (eq api "none")}}
          <QueryClientProvider client={queryClient}>
            <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
              <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
              <GestureHandlerRootView style={styles.container}>
                <Stack>
                  <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
                  <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
                </Stack>
              </GestureHandlerRootView>
            </ThemeProvider>
          </QueryClientProvider>
        {{else}}
          <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
            <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
            <GestureHandlerRootView style={styles.container}>
              <Stack>
                <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
                <Stack.Screen name="modal" options=\{{ title: "Modal", presentation: "modal" }} />
              </Stack>
            </GestureHandlerRootView>
          </ThemeProvider>
        {{/unless}}
      {{/if}}
    </>
  );
}